討論範圍

Kotlin & Flutter ListView 元件使用方式

目的

比較 Kotlin & Flutter ListView 元件使用方式差異

Kotlin

• ListView 元件：Android 官方說明

ListView 元件簡要建立步驟：

1. 建立 xml 檔案：
   • 建立頁面 layout 放入 ListView 元件
   • 建立 ListView 每個 item 的 layout
2. 建立 Adapter 檔案：控制傳給 ListView 的 item 資料和 layout ，以及監聽點擊事件。
3. Activity / Fragment：設定 Adapter 給 ListView，就完成了。

如果 ListView 的 item layout 要更多變化(EX: 加圖片或按鈕之類的就要用 RecyclerView)

Flutter

• ListView 元件：Flutter 官方說明

Flutter 的 ListView 元件主要只會分需要顯示的資料數量來選擇使用的方法，ListView 元件的 item 的 layout 都可以加圖片或按鈕。

依需要顯示的資料數量與顯示畫面要求，有以下四種 ListView 建立方法：

ListView 元件簡要建立步驟：

• 在 StatefulWidget 元件中，依需求使用其中一種 ListView 建立方法，傳入 ListView item 相關必要相關參數，這樣就完成了。

補充：

• ListView(children:List<Widget>[]) 較少資料適用(如頁面不滑動即可顯示所有資料的時候)原因：
  因為無論是不是這一頁看得到的資料，會把所有資料都套用到元件 item，所以建立元件時會比較花時間，推薦使用在少少資料的時候。

• ListView.builder 多到爆炸的資料適用原因：
  因為只把這一頁看得到的資料套用到元件item，會比較省時間。

ListView child 元件(每個 item) lifecycle ：

• 滑到看不到就被 destroyed，滑回來又被 create。

• 如果要保存頁面尚不會顯示的元件 item 資料，可由以下方法儲存資料：

  • 存資料到其他暫存位置
  • 設定 KeepAlive 保存 child 元件 狀態
  • child 元件 使用 AutomaticKeepAlive 元件 會自動保存 child 元件 狀態

統整 Kotlin & Flutter ListView 元件用法差異